<template>
<el-dialog :title="$t('plus.edit_prize')" v-model="dialogVisible" width="600px" :close-on-click-modal="false"
		:before-close="dialogFormVisible" :close-on-press-escape="false">
		<el-form size="small" ref="form" :model="form">
			<el-form-item :label="$t('plus.prize')" :label-width="formLabelWidth" :rules="[{  required: true,  message: ''}]"
				prop="name">
				<el-radio-group v-model="form.type" @change="changeType">
					<el-radio :label="0">{{$t('plus.not_winning')}}</el-radio>
					<el-radio :label="1">{{$t('plus.coupon')}}</el-radio>
					<el-radio :label="3">{{$t('plus.gift_product')}}</el-radio>
					<el-radio :label="2">{{$t('plus.gift_point')}}</el-radio>
					<el-radio :label="4">{{$t('plus.balance')}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.type == 3" :label="$t('plus.product_price2')" :label-width="formLabelWidth"
				:rules="[{  required: true,  message: $t('plus.input_product_price')}]" prop="productPrice">
				<el-input v-model="form.productPrice"></el-input>
			</el-form-item>
			<el-form-item v-if="form.type == 1" :label="$t('plus.coupon')" :label-width="formLabelWidth"
				:rules="[{  required: true,  message: $t('plus.please_select_coupon')}]" prop="awardId">
				<div class="d-s-c">
					<el-button type="primary" @click="open_add = true" size="small">{{$t('plus.select_coupon')}}</el-button>
					<el-icon color="#67c23a" size="18" v-if="form.awardId">
						<CircleCheckFilled />
					</el-icon>
				</div>
			</el-form-item>
			<el-form-item v-if="form.type == 2" :label="$t('plus.gift_point')" :label-width="formLabelWidth"
				:rules="[{  required: true,  message: $t('plus.input_points')}]" prop="points">
				<el-input type="number" v-model="form.points" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item v-if="form.type == 4" :label="$t('plus.balance')" :label-width="formLabelWidth"
				:rules="[{  required: true,  message: $t('plus.input_balance')}]" prop="balance">
				<el-input type="number" v-model="form.balance" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item :label="$t('plus.prize_name')" :label-width="formLabelWidth" :rules="[{  required: true,  message: $t('plus.input_prize_name')}]"
				prop="name">
				<el-input v-model="form.name" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item :label="$t('plus.prize_image_label')" :label-width="formLabelWidth" :rules="[{  required: true,  message: $t('plus.upload_prize_image')}]"
				prop="image">
				<div class="draggable-list">
					<div class="item" v-if="form.image">
						<img v-img-url="form.image" />
						<a href="javascript:void(0);" class="delete-btn" @click.stop="deleteImg(index)">
							<el-icon>
								<CloseBold />
							</el-icon>
						</a>
					</div>
					<div v-else class="item img-select" @click="openUpload()">
						<el-icon>
							<Plus />
						</el-icon>
					</div>
				</div>
				<div class="gray9">{{$t('plus.image_size_tip1')}}</div>
			</el-form-item>
			<el-form-item :label="$t('plus.prize_quantity')" :label-width="formLabelWidth" :rules="[{  required: true,  message: $t('plus.input_prize_quantity')}]"
				prop="stock">
				<el-input v-model="form.stock" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item :label="$t('plus.prize_weight')" :label-width="formLabelWidth" :rules="[{  required: true,  message: $t('plus.input_prize_weight')}]"
				prop="weight">
				<el-input type="number" @input="openWeight" min="0" max="100" v-model="form.weight"
					class="max-w460"></el-input>
			</el-form-item>
			<el-form-item :label="$t('plus.hint_text')" :label-width="formLabelWidth" :rules="[{  required: true,  message: $t('plus.input_hint')}]"
				prop="prompt">
				<el-input v-model="form.prompt" class="max-w460"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible">{{$t('plus.cancel')}}</el-button>
				<el-button type="primary" @click="submit" :loading="loading">{{$t('plus.confirm')}}</el-button>
			</div>
		</template>
	</el-dialog>
	<Upload v-if="isUpload" :config="config" :isupload="isUpload" @returnImgs="returnImgsFunc">{{$t('plus.upload_image_button')}} 
</Upload>
	<GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)"></GetCoupon>
</template>

<script>
import Upload from "@/components/file/Upload.vue";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
import { verifiyNumberInteger } from "@/utils/DateTime.js";
export default {
  components: {
    Upload,
    GetCoupon
  },
  data() {
    return {
      isUpload: false,
      config: {},
      loading: false,
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      form: {
        awardId: "",
        name: "",
        image: "",
        stock: "",
        weight: "",
        prompt: "",
        points: "",
        balance: ""
      },
      exclude_ids: [],
      /*是否打开选择商品*/
      isProduct: false,
      open_add: false
    };
  },
  props: ["model"],
  created() {
    console.log(this.model);
    if (!this.model.type) {
      this.model.type = 0;
    }
    this.form = this.model;
    this.dialogVisible = true;
  },
  methods: {
    openWeight(value) {
      let m = verifiyNumberInteger(value);
      this.form.weight = m > 100 ? 100 : m;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      self.open_add = e.openDialog;
      if (e.type == "success") {
        self.form.awardId = e.params.couponId;
        self.form.name = e.params.name;
      }
    },
    changeType(e) {
      this.form.prizeId = 0;
      this.form.awardId = 0;
      // this.form.name = '';
      // this.form.image = '';
      this.form.points = "";
      this.form.balance = "";
    },
    /*打开上传图片*/
    openUpload: function () {
      this.config = {
        total: 1,
        fileType: "image"
      };
      this.isUpload = true;
    },
    deleteImg(index) {
      this.form.image = "";
    },
    /*上传商品图片*/
    returnImgsFunc(e) {
      if (e != null) {
        let imgs = this.form.image = e[0].filePath;
        this.form.image = imgs;
      }
      this.isUpload = false;
    },
    /*添加商品*/
    addProduct() {
      this.isProduct = true;
    },
    /*关闭商品*/
    closeProductFunc(e) {
      let self = this;
      self.isProduct = e.openDialog;
      if (e.type == "success") {
        console.log(e);
        self.form.awardId = e.params.productId;
        self.form.name = e.params.productName;
        self.form.image = e.params.imagePath;
      }
    },
    /*处理*/
    submit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          this.$emit("closeDialog", {
            type: "success",
            openDialog: false,
            form: form
          });
        }
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      this.$emit("closeDialog", {
        type: "error",
        openDialog: false
      });
    }
  }
};
</script>

